<template>
  <div class="index">
    <el-form ref="form" :model="form" label-width="180px">
      <div v-for="(item, index) of form" :key="index">
        <el-form-item v-show="showCondition(item)" :label="item.name">
          <el-input v-if="item.type == 'input'" v-model="item.value"></el-input>
          <el-radio-group v-if="item.type == 'radio'" v-model="item.value">
            <el-radio-button
              v-for="r in item.options"
              :key="r.value"
              :label="r.value"
              :value="r.value"
              >{{ r.label }}</el-radio-button
            >
          </el-radio-group>
          <el-select
            v-if="item.type == 'select'"
            v-model="item.value"
            placeholder="请选择"
          >
            <el-option
              v-for="s in item.options"
              :label="s.label"
              :value="s.value"
              :key="s.value"
            >
            </el-option>
          </el-select>
          <span v-if="item.tip">
            <span v-if="isString(item.tip)">{{ item.tip }}</span>
            <span v-else>{{ item.tip[item.value] }}</span>
          </span>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      form: {
        titleRule: {
          value: 1,
          name: "名称",
          type: "radio",
          options: [
            {
              label: "自动匹配",
              value: 1,
            },
            {
              label: "程序化匹配",
              value: 2,
            },
          ],
          tip: {
            1: "选择自动匹配，系统将先通过定向包和创意组排列组合生成一批项目，然后为自动匹配您选择的文案，当您选择的文案数量不足时，系统将循环使用已选文案，尽可能让您的创意保持差异性",
            2: "选择程序化测试，您选择的文案将和已选的定向包和创意组进行排序组合，生成大批量项目，你选择的文案数量将影响最终生成的广告项目数。",
          },
        },
        type: {
          value: 1,
          name: "类型",
          type: "radio",
          tip: "123456",
          options: [
            {
              label: 1,
              value: 1,
            },
            {
              label: 2,
              value: 2,
            },
            {
              label: 3,
              value: 3,
            },
            {
              label: 4,
              value: 4,
            },
          ],
        },
        target: {
          value: 2,
          type: "select",
          name: "优化目标",
          condition: ["type:1"],
          options: [
            {
              label: "免费",
              value: 1,
            },
            {
              label: "激活",
              value: 2,
            },
            {
              label: "注册",
              value: 3,
            },
            {
              label: "付费",
              value: 4,
            },
          ],
        },
        deepTarget: {
          value: 3,
          type: "select",
          name: "深度优化目标",
          condition: ["type:1", "target:2"],
          options: [
            {
              label: "免费",
              value: 1,
            },
            {
              label: "激活",
              value: 2,
            },
            {
              label: "注册",
              value: 3,
            },
            {
              label: "付费",
              value: 4,
            },
          ],
        },
        priceWay: {
          value: 1,
          type: "radio",
          name: "竞价策略",
          condition: ["target:2", "deepTarget:3"],
          options: [
            {
              label: "1",
              value: 1,
            },
            {
              label: "2",
              value: 2,
            },
            {
              label: "3",
              value: 3,
            },
            {
              label: "4",
              value: 4,
            },
          ],
        },
        price: {
          value: null,
          type: "input",
          name: "价格",
          condition: ["priceWay:3", "deepTarget:3", "target:2"],
        },
      },
    };
  },
  methods: {
    initData(){},
    isString(tip) {
      if (typeof tip == "string") return true;
      return false;
    },
    showCondition(info) {
      if (!info.condition) {
        info.show = true;
        return true;
      }
      let flag = info.condition.every(
        (item) => this.form[item.split(":")[0]].value == item.split(":")[1]
      );
      info.show = flag;
      if (!flag) info.value = "";
      return flag;
    },
    onSubmit() {
      console.log(this.form);
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.index {
  width: 600px;
  position: relative;
  /* min-height: 100vh; */
}
</style>
